<!DOCTYPE>
<html>
    <!--定位和浮动允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置-->
    <div>
        <h2>这是一个正常位置的标题</h2>
        <h2 class="left">这是一个左边的标题</h2>
        <h2 class="right">这是一个右边的标题</h2>
    </div>
    <div>
        <h2 class="absolute">定位标题</h2>
    </div>
    <div>
        <p class="scroll">很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
    </div>
    <div>
        <p>
            萌萌哒<img class="top" src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg"/>
        </p>
        <p>
            萌萌哒<img class="bottom" src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg"/>
        </p>
    </div>
    <!--CSS位移属性
    position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
    top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
    right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
    bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
    left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
    overflow	设置当元素的内容溢出其区域时发生的事情。
    clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
    vertical-align	设置元素的垂直对齐方式。
    z-index	设置元素的堆叠顺序。
    -->
    <div>
        <p><img class="float" src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg"/></p>
        <p>很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
        <p>很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
    </div>
    <!--因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：-->
    <div>
        <div class="news">
        <img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg"/>
        <p>很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
        <div class="clear"></div>
    </div>
    <div>
        <h1 class="important">这是个标题</h1>
        <p class="important">这是个段落</p>
    </div>
    <div>
        <a href="https://www.baidu.com/">有样式链接</a>
        <a class="href">无样式链接</a>
    </div>
    <div>
        <h1 class="h1">这是一个<em>红色的</em>标题</h1>
    </div>
    <ul>
        <li>List item 1
            <ol>
                <li>List item 1-1</li>
                <li>List item 1-2</li>
                <li>List item 1-3
                  <ol>
                    <li>List item 1-3-1</li>
                    <li>List item <em>1-3-2</em></li>
                    <li>List item 1-3-3</li>
                  </ol>
                </li>
                <li>List item 1-4</li>
            </ol>
        </li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <div>
        <h1>这是个<strong>红色</strong>的<strong>红色</strong>标题</h1>
        <h1>这是个<em>不会变<strong>不会变吧</strong>的</em>标题</h1>
    </div>
    <div>
        <h1>这是个兄</h1>
        <p>这是个弟</p>
        <p>这是抱养的</p>
        <span>这是乱入的</span>
        <p>这是野生的</p>
    </div>
    <div>
        <input value="请输入内容">
    </div>
    <div>
        <p>1111</p>
        <p>2222</p>
        <p>文字<q lang="no">段落中的引用的文字</q>文字</p>
    </div>

</html>
<style>
    h2.left
    {
        position:relative;
        left: -5em;
    }
    h2.right
    {
        position:relative;
        left: 50px;
    }
    /*相对定位会按照元素的原始位置对该元素进行移动*/
    h2.absolute
    {
        position:absolute;
        right: 100px;
        top: 150px;
    }
    /*通过绝对定位，元素可以放置到页面上的任何位置*/
    p.scroll
    {
        width:250px;
        height:150px;
        overflow: scroll;
    }
    /*溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible*/
    img.top {
        width: 150px;
        vertical-align: text-top;
    }
    img.bottom {
        width: 150px;
        vertical-align: text-bottom;
    }
    /*垂直排列图象
    baseline	默认。元素放置在父元素的基线上。
    sub	垂直对齐文本的下标。
    super	垂直对齐文本的上标
    top	把元素的顶端与行中最高元素的顶端对齐
    text-top	把元素的顶端与父元素字体的顶端对齐
    middle	把此元素放置在父元素的中部。
    bottom	把元素的顶端与行中最低的元素的顶端对齐。
    text-bottom	把元素的底端与父元素字体的底端对齐。
    length	 
    %	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
    inherit	规定应该从父元素继承 vertical-align 属性的值。
    */
    img.float {
        width: 90px;
        float:right
    }
    /*float 属性定义元素在哪个方向浮动
    left	元素向左浮动
    right	元素向右浮动
    none	默认值。元素不浮动，并会显示在其在文本中出现的位置
    inherit	规定应该从父元素继承 float 属性的值
    */
    .news {
        background-color: gray;
        border: solid 1px black;
    }
    .news img {
        width: 80px;
        float: left;
    }
    .news p {
        float: right;
    }
    .clear {
        clear: both;
    }
    /*clear图像的某位置不允许出现浮动元素
    left	在左侧不允许浮动元素
    right	在右侧不允许浮动元素
    both	在左右两侧均不允许浮动元素
    none	默认值。允许浮动元素出现在两侧
    inherit	规定应该从父元素继承 clear 属性的值
    */
    .important {
        color:red;
    }
    a[href]{
        color: red;
    }
    a[class="href"]{
        color: aqua;
    }
    /*属性与属性值必须完全匹配,如果属性值包含用空格分隔的值列表，匹配就可能出问题
    [attribute]	用于选取带有指定属性的元素。
    [attribute=value]	用于选取带有指定属性和值的元素。
    [attribute~=value]	用于选取属性值中包含指定词汇的元素。
    [attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
    [attribute^=value]	匹配属性值以指定值开头的每个元素。
    [attribute$=value]	匹配属性值以指定值结尾的每个元素。
    [attribute*=value]	匹配属性值中包含指定值的每个元素
    */
    .h1 em{
        color: red;
    }
    ul em {
        color:red; 
        font-weight:bold;
    }
    /*有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的*/
    h1 > strong {
        color:red;
    }
    /*希望缩小范围，只选择某个元素的子元素，可以使用子元素选择器
    table.company td > p
    选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性
    */
    h1 + p {
        background-color: aqua;
        margin-top:50px;
    }
    input:focus{
        background-color:yellow;
    }
    p:first-child {
        color: red;
    } 
    /*first-child 伪类来选择元素的第一个子元素*/
    q:lang(no){
        quotes: "~" "~"
    }
    /*:lang 伪类使你有能力为不同的语言定义特殊的规则*/
    /*
    :active	向被激活的元素添加样式
    :focus	向拥有键盘输入焦点的元素添加样式
    :hover	当鼠标悬浮在元素上方时，向元素添加样式
    :link	向未被访问的链接添加样式
    :visited	向已被访问的链接添加样式
    :first-child	向元素的第一个子元素添加样式
    :lang	向带有指定 lang 属性的元素添加样式
    */
    p:first-line{
        color:#ff0000;
        font-variant:small-caps;
    }
    /*"first-line" 伪元素用于向文本的首行设置特殊样式,"first-line" 伪元素只能用于块级元素*/
    p:first-letter{
        color:#ff0000;
        font-size:xx-large;
    }
    /*"first-letter" 伪元素用于向文本的首字母设置特殊样式*/
    h1:before{
        content:url(http://pic.uzzf.com/up/2017-2/14873018711362378.jpg);
    }
    /*":before" 伪元素可以在元素的内容前面插入新内容*/
    h1:after{
        content:url(http://pic.uzzf.com/up/2017-2/14873018711362378.jpg);
    }
    /*":after" 伪元素可以在元素的内容之后插入新内容*/
    /*
    :first-letter	向文本的第一个字母添加特殊样式
    :first-line	向文本的首行添加特殊样式
    :before	在元素之前添加内容
    :after	在元素之后添加内容
    */
</style>